<template>
	<div>
		<el-form :model="dialogobj" label-width="80px" ref="userFormref" v-if="title == '用户列表'">
			<el-form-item label="名称">
				<el-input v-model="dialogobj.username"></el-input>
			</el-form-item>
			<el-form-item label="头像">
				<el-upload class="avatar-uploader" action="/blog/users/addUpload" :show-file-list="false"
					:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<el-avatar icon="el-icon-user-solid" v-if="dialogobj.userpic" :src="dialogobj.userpic">
					</el-avatar>
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="邮箱">
				<el-input v-model="dialogobj.email"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="dialogobj.password"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-switch v-model="dialogobj.status" :active-value="0" :inactive-value="1"></el-switch>
			</el-form-item>
			<el-form-item label="角色">
				<el-switch v-model="dialogobj.role" :active-value="0" :inactive-value="1"></el-switch>
			</el-form-item>
			<el-form-item label="关于">
				<div class="btn-fullscreen" id="fullscreen" style="background-color: #fff;">
					<el-tooltip effect="dark" :content="fullscreen" placement="bottom">
						<i class="el-icon-rank" @click="handleFullScreen"></i>
					</el-tooltip>
					<div style="width: 80%;margin:0px auto ;">
						<!-- 图片上传组件辅助-->
						<el-upload class="avatar-uploader" :action="serverUrl" name="file" :headers="header"
							:show-file-list="false" list-type="picture" :multiple="false" :on-success="uploadSuccess"
							:on-error="uploadError" :before-upload="beforeUpload">
						</el-upload>
				
						<quill-editor class="editor" v-model="dialogobj.about" ref="myQuillEditor"
							:options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
							@change="onEditorChange($event)">
						</quill-editor>
					</div>
				</div>
				
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit" v-if="dialogobj.id == undefined">立即创建</el-button>
				<el-button type="primary" @click="onSubmit" v-else>编辑</el-button>
				<el-button @click="$emit('dialogVisibleemit');">取消</el-button>
			</el-form-item>
		</el-form>

		<el-form :model="dialogobj" label-width="80px" ref="articleFormref" v-if="title == '文章列表'">
			<el-form-item label="文章名称">
				<el-input v-model="dialogobj.name"></el-input>
			</el-form-item>
			<el-form-item label="图片">
				<el-upload class="avatar-uploader" action="/blog/users/addUpload" :show-file-list="false"
					:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<el-avatar shape="square" icon="el-icon-picture" :size="100" v-if="dialogobj.pic"
						:src="dialogobj.pic">
					</el-avatar>
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="分类">
				<el-select v-model="dialogobj.cate_id" placeholder="请选择活动区域">
					<el-option :label="item.category" :value="item.id" v-for="(item,value) in CateData" :key="value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="文章描述">
				<el-input v-model="dialogobj.description"></el-input>
			</el-form-item>
			<el-form-item label="内容">
				<div class="btn-fullscreen" id="fullscreen" style="background-color: #fff;">
					<el-tooltip effect="dark" :content="fullscreen" placement="bottom">
						<i class="el-icon-rank" @click="handleFullScreen"></i>
					</el-tooltip>
					<div style="width: 80%;margin:0px auto ;">
						<!-- 图片上传组件辅助-->
						<el-upload class="avatar-uploader" :action="serverUrl" name="file" :headers="header"
							:show-file-list="false" list-type="picture" :multiple="false" :on-success="uploadSuccess"
							:on-error="uploadError" :before-upload="beforeUpload">
						</el-upload>

						<quill-editor class="editor" v-model="dialogobj.content" ref="myQuillEditor"
							:options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
							@change="onEditorChange($event)">
						</quill-editor>
					</div>
				</div>

			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit" v-if="dialogobj.id == undefined">立即创建</el-button>
				<el-button type="primary" @click="onSubmit" v-else>编辑</el-button>
				<el-button @click="$emit('dialogVisibleemit');">取消</el-button>
			</el-form-item>
		</el-form>

		<el-form :model="dialogobj" label-width="80px" ref="articleFormref" v-if="title == '分类列表'">
			<el-form-item label="分类名称">
				<el-input v-model="dialogobj.category"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-switch v-model="dialogobj.status" :active-value="0" :inactive-value="1"></el-switch>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit" v-if="dialogobj.id == undefined">立即创建</el-button>
				<el-button type="primary" @click="onSubmit" v-else>编辑</el-button>
				<el-button @click="$emit('dialogVisibleemit');">取消</el-button>
			</el-form-item>
		</el-form>

		<el-form :model="dialogobj" label-width="80px" ref="articleFormref" v-if="title == '项目列表'">
			<el-form-item label="项目名称">
				<el-input v-model="dialogobj.projectname"></el-input>
			</el-form-item>
			<el-form-item label="链接">
				<el-input v-model="dialogobj.projecturl"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit" v-if="dialogobj.id == undefined">立即创建</el-button>
				<el-button type="primary" @click="onSubmit" v-else>编辑</el-button>
				<el-button @click="$emit('dialogVisibleemit');">取消</el-button>
			</el-form-item>
		</el-form>

		<el-form :model="dialogobj" label-width="80px" ref="articleFormref" v-if="title == '评论列表'">
			<el-form-item label="评论内容">
				<el-input type="textarea" v-model="dialogobj.con_dis"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit" v-if="dialogobj.id == undefined">立即创建</el-button>
				<el-button type="primary" @click="onSubmit" v-else>编辑</el-button>
				<el-button @click="$emit('dialogVisibleemit');">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {
		quillEditor
	} from "vue-quill-editor";
	import "quill/dist/quill.core.css";
	import "quill/dist/quill.snow.css";
	import "quill/dist/quill.bubble.css";
	import {
		mapState
	} from 'vuex'
	export default {
		name: "formvue",
		data() {
			return {
				CateData: [],
				fullscreen: '全屏',
				quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
				editorOption: {
					theme: "snow", //'snow' or 'bubble'
					placeholder: "您想说点什么？",
					modules: {
						toolbar: {
							container: [
								["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
								["blockquote", "code-block"], // 引用  代码块
								[{
									header: 1
								}, {
									header: 2
								}], // 1、2 级标题
								[{
									list: "ordered"
								}, {
									list: "bullet"
								}], // 有序、无序列表
								[{
									script: "sub"
								}, {
									script: "super"
								}], // 上标/下标
								[{
									indent: "-1"
								}, {
									indent: "+1"
								}], // 缩进
								// [{'direction': 'rtl'}],                         // 文本方向
								[{
									size: ["small", false, "large", "huge"]
								}], // 字体大小
								[{
									header: [1, 2, 3, 4, 5, 6, false]
								}], // 标题
								[{
									color: []
								}, {
									background: []
								}], // 字体颜色、字体背景颜色
								[{
									font: []
								}], // 字体种类
								[{
									align: []
								}], // 对齐方式
								["clean"], // 清除文本格式
								["link", "image", "video"] // 链接、图片、视频
							],
							handlers: {
								image: function(value) {
									if (value) {
										// 触发input框选择图片文件
										document.querySelector(".avatar-uploader input").click();
									} else {
										this.quill.format("image", false);
									}
								},
								// link: function(value) {
								//   if (value) {
								//     var href = prompt('请输入url');
								//     this.quill.format("link", href);
								//   } else {
								//     this.quill.format("link", false);
								//   }
								// },
							}
						}
					}
				},
				serverUrl: "http://localhost:3000/blog/users/addUpload", // 这里写你要上传的图片服务器地址
				header: {
					// token: sessionStorage.token
				} // 有的图片服务器要求请求头需要有token
			}
		},
		created() {
			this.getCateData();
		},
		components: {
			quillEditor
		},
		computed: {
			...mapState(['userinfo'])
		},
		methods: {
			async getCateData() {
				if (this.title == '文章列表') {
					let {
						data
					} = await this.$axios.get('/blog/users/usercatelist?userid=' + (
						this.userinfo.role == 0 ? '' : this.userinfo.id));
					this.CateData = data.data.List;
				}
			},
			async onSubmit() {
				if (this.title == '用户列表') {
					let {
						data
					} = await this.$axios.post('/blog/users/addoredituser', this.dialogobj);
					this.$message({
						type: 'success',
						message: this.dialogobj.id == undefined ? '创建成功!' : '修改成功!'
					});
					this.$emit('dialogVisibleemit');
					this.dialogobj = {};
				} else if (this.title == '文章列表') {
					let {
						data
					} = await this.$axios.post('/blog/users/addoreditarticle', this.dialogobj);
					this.$message({
						type: 'success',
						message: this.dialogobj.id == undefined ? '创建成功!' : '修改成功!'
					});
					this.$emit('dialogVisibleemit');
					this.dialogobj.name = "";
					this.dialogobj.description = "";
					this.dialogobj.pic = "";
					this.dialogobj.content = "";
				} else if (this.title == '分类列表') {
					let {
						data
					} = await this.$axios.post('/blog/users/addoreditcate', this.dialogobj);
					this.$message({
						type: 'success',
						message: this.dialogobj.id == undefined ? '创建成功!' : '修改成功!'
					});
					this.$emit('dialogVisibleemit');
					this.dialogobj.status = "";
					this.dialogobj.category = "";
				} else if (this.title == '项目列表') {
					let {
						data
					} = await this.$axios.post('/blog/users/addoreditproject', this.dialogobj);
					this.$message({
						type: 'success',
						message: this.dialogobj.id == undefined ? '创建成功!' : '修改成功!'
					});
					this.$emit('dialogVisibleemit');
					this.dialogobj.projectname = "";
					this.dialogobj.projecturl = "";
				} else if (this.title == '评论列表') {
					let {
						data
					} = await this.$axios.post('/blog/users/addoreditdiscuss', this.dialogobj);
					this.$message({
						type: 'success',
						message: this.dialogobj.id == undefined ? '创建成功!' : '修改成功!'
					});
					this.$emit('dialogVisibleemit');
					this.dialogobj.con_dis = "";
				}
			},
			handleAvatarSuccess(res, file) {
				if (this.title == '用户列表') {
					this.dialogobj.userpic = res.data;
					// this.dialogobj.userpic = URL.createObjectURL(file.raw);
				} else if (this.title == '文章列表') {
					this.dialogobj.pic = res.data;
				}
			},
			beforeAvatarUpload(file) {
				console.log(file);
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				// if (!isLt2M) {
				// 	this.$message.error('上传头像图片大小不能超过 2MB!');
				// }
				// console.log(isJPG);
				// console.log(isLt2M);
				// return isJPG && isLt2M;
				return true;
			},

			// 全屏事件
			handleFullScreen() {
				// 此处可根据获取节点进行区域全屏事件
				let element = document.getElementById('fullscreen');
				console.log(this.fullscreen);
				if (this.fullscreen != '全屏') {
					if (document.exitFullscreen) {
						document.exitFullscreen();
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen();
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen();
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen();
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.msRequestFullscreen) {
						// IE11
						element.msRequestFullscreen();
					}
				}
				this.fullscreen = this.fullscreen == '全屏' ? '取消全屏' : '全屏';
			},

			onEditorBlur() {
				//失去焦点事件

			},
			onEditorFocus(event) {
				//获得焦点事件
			},
			onEditorChange() {
				//内容改变事件
				// this.$emit("input", this.content);
			},

			// 富文本图片上传前
			beforeUpload() {
				// 显示loading动画
				this.quillUpdateImg = true;
			},

			uploadSuccess(res, file) {
				// res为图片服务器返回的数据
				// 获取富文本组件实例
				let quill = this.$refs.myQuillEditor.quill;
				// 如果上传成功
				if (res.code == 200) {
					// 获取光标所在位置
					let length = quill.getSelection().index;
					// 插入图片  res.url为服务器返回的图片地址
					quill.insertEmbed(length, "image", res.data);
					// 调整光标到最后
					quill.setSelection(length + 1);
				} else {
					this.$message.error("图片插入失败");
				}
				// loading动画消失
				this.quillUpdateImg = false;
			},
			// 富文本图片上传失败
			uploadError() {
				// loading动画消失
				this.quillUpdateImg = false;
				this.$message.error("图片插入失败");
			}


		},
		props: {
			title: {
				type: String,
				require: true //声明是否必须
			},
			dialogobj: {
				type: Object,
				require: true, //声明是否必须
			}
		}
	}
</script>

<style lang="less" scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.btn-fullscreen {
		overflow: auto;
	}
</style>
